<template>
    <view class="page">
        <u-navbar title="我的收货地址" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <view>
            <view class="uni-list">
                <view style="background-color: #fff; padding: 0 10rpx; border-radius: 20rpx; margin-bottom: 20rpx;" v-for="item,index in addressList"
                    :key="index">
                    <view @tap='goConfirmOrder(item)' style="padding:30rpx 20rpx;">
                        <view style="display:flex; justify-content:space-between; font-size:30rpx; margin-bottom:30rpx;">
                            <view style="display: flex; font-size:30rpx; align-items: center;">
                                <view style="font-size: 32rpx; font-weight:700; margin-right:30rpx;">{{item.name}}
                                </view>
                                <view style="color: #515151; margin-right:20rpx;">{{item.mobile}}</view>
                                <view style="color:#ea5504; border:1rpx solid #ea5504; font-size:24rpx; border-radius:6rpx; text-align:center; padding:0 8rpx;height: 32rpx;
					              line-height: 32rpx;"
                                    v-if="item.is_default == 1">默认</view>
                            </view>
                            <view @tap.stop='goEdit(item, index)'>
                                <u-icon name="edit-pen" color="#6a6a6a" size="38"></u-icon>
                                <!-- <image src="$imgUrl+'/image/edit.png'" style="width: 50rpx;height:40rpx;"></image> -->
                                <!-- <view>编辑</view> -->
                            </view>
                        </view>
                        <view style="display:flex; justify-content:space-between; font-size:30rpx;margin-top:10rpx;">
                            <view style="width: 560rpx;color: #6a6a6a;" v-if="item.province">
                                {{item.province}}{{item.city}}{{item.area}}{{item.detailed}}
                            </view>
                            <!-- <view> -->
                            <uni-icons color="#999999" size="22" type="trash-filled" @tap.stop='addreDelete(item, index)' />
                            <!-- <u-icon name="trash" color="#999999"  size="36"></u-icon> -->
                            <!-- 删除 style="color:#6a6a6a; font-size:24rpx;" -->
                            <!-- </view> -->

                        </view>
                    </view>
                    <!-- <view style="padding: 30rpx; display: flex; justify-content: space-between;">
                      <view class="content-label">
                        <radio-group @click="radioChange(item,index)">
                            <label class="radio">
                                <radio style="transform:scale(0.6)" :checked="item.is_default == 1" value="r1" />设为默认地址
                            </label>
                        </radio-group>
                    </view>
                      <view style="color:#6a6a6a; font-size:26rpx;" @tap.stop='addreDelete(item, index)'>删除</view>
                </view> -->
                </view>
                <view class="no-img" v-if="addressList.length==0">
                    <image :src="$imgUrl+'noData/content.png'" mode="aspectFit" style="height:260rpx;"></image>
                    <view class="no-text">暂无收货地址</view>
                </view>
                <view v-if="isLogin" style="display: flex; justify-content:center; align-items:center" @click="newAddress()">
                    <view>
                        <!-- <image src="../../../static/comment/plus.png" style="width: 36rpx;height: 36rpx; margin-right:10rpx;">
                </image> -->
                        <view style="text-align:center;" class="btn"><text class="cuIcon-add"></text>添加新地址</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    getAddresLists,
    delAddress,
    setAddresDefault
} from "@/api/my/address"
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    data() {
        return {
            addressList: [],
            page: '', //页码
            pageCount: '', //总页数
            current: 0,
            isSelectedPath: false,
            $imgUrl: this.$imgUrl,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            isLogin: uni.getStorageSync('token') ? true : false,
        }
    },
    // computed: {
    //     ...mapState({
    //         addressList: state => state.path.addressList
    //     })
    // },
    // onLoad(e) {
    //     if (e.type === 'selectedPath') {
    //         this.isSelectedPath = true;
    //     }
    //     //初始化拿到收货地址数据
    //     this.__initAddress();
    // },
    onShow() {
        this.addressList = []
        this.getAddresLists();
    },
    onLoad(e) {
        console.log(e.type, '上一页参数')
        if (e.type == 'selectedPath') {
            this.isSelectedPath = true;
        }
        this.getAddresLists();
        //隐藏手机号
        // let that = this
        // let number = this.items[0].item.phone; //获取到手机号码字段
        // console.log('手机号', this.items[0].item.phone)
        // let mphone = number.substring(0, 3) + '******' + number.substring(9);
        // that.item.phone = mphone
    },
    methods: {
        // ...mapMutations(['__initAddressList']),
        //初始化 （请求收货地址接口）
        // __initAddress() {
        //     this.__initAddressList()
        // },

        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        getAddresLists() {
            if (this.isLogin) {
                getAddresLists({
                    limit: 20,
                    page: 1
                }).then((res) => {
                    this.addressList = res.data.lists
                    uni.setStorageSync('addressListLength', this.addressList.length)
                    this.page = res.data.page
                    this.pageCount = res.data.pageCount
                    console.log(this.addressList.length, '9999')
                }).catch(() => { })
            }
        },
        newAddress() {
            uni.navigateTo({
                url: '/pagesA/my/AddAddress'
            });
        },

        addreDelete(item, index) {
            console.log(item, "item")
            const currentIndex = index
            uni.showModal({
                content: '确认删除吗',
                success: (res) => {
                    if (res.confirm) { // 用户点击了确定
                        console.log(1111)
                        let params = {
                            addres_ids: item.id
                        }
                        delAddress(params).then((res) => {
                            // this.addressList.splice(currentIndex, 1) // 删除当前索引对应的数据
                            this.getAddresLists()
                            console.log(this.addressList, '++++++')
                            // uni.setStorageSync('addressList', address)
                        })
                    } else {
                        console.log('用户点击了取消')
                    }
                }
            })
        },

        goEdit(item, index) {
            console.log(item, "8888")
            uni.navigateTo({
                url: '/pagesA/my/AddAddress?key=' + encodeURIComponent(JSON.stringify(item))

            });
        },
        radioChange(item, index) {
            let params = {
                address_id: item.id
            }
            setAddresDefault(params).then((res) => {
                console.log(res, 'is_default')

            })
            this.getAddresLists();
            // for (var i = 0; i < this.addressList.length; i++) {
            //     this.addressList[i].is_default = i == index; //i==index 表示i是否等于index,等于执行语句，不等不执行
            // }
            // this.addressList.splice(0, 0, ...this.addressList.splice(index, 1)); //默认地址设在首位  
        },
        //下拉刷新
        onPullDownRefresh() {
            this.getAddresLists();
        },
        //触底加载
        onReachBottom() {
            console.log(12333);
            let that = this
            that.page = that.page + 1
            if (that.page > that.pageCount) return;
            let params = {
                page: that.page,
            }
            getAddresLists(params).then((res) => {
                for (let i = 0; i < res.data.lists.length; i++) {
                    that.addressList.push(res.data.lists[i])
                }
                that.page = res.page
                that.pageCount = res.pageCount
                console.log(that.addressList, '9999')
            })

        },
        //返回确认订单页面
        goConfirmOrder(item) {
            //如果是从确认订单过来的执行以下代码:
            if (this.isSelectedPath) {
                //自定义事件：页面通讯
                // uni.$emit('selectPathItem', item);
                //返回上一页
                // uni.navigateBack({
                //     delta: 10
                // })
                // uni.navigateTo({
                //     url: '/pagesA/mall/orderconfirm'
                // });
                // uni.$emit('add', { listData: item })
                // let data = {...item,...{length:this.addressList.length}}
                this.$bus.$emit('addAddress', item);
                uni.navigateBack({
                    delta: 1
                });
            }
        }

    }
}
</script>

<style scoped>
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.no-img {
  width: 100%;
  height: 450rpx;
  text-align: center;
  padding: 150rpx 30rpx;
  margin-bottom: 88rpx;
}

/* .no-img image {
        height: 260rpx;
      } */
.no-text {
  margin-top: 66rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 36rpx;
  text-align: center;
}

.btn {
  background: linear-gradient(to bottom, #2f9971, #4099ad);
  margin-top: 80rpx;
  margin-bottom: 50rpx;
  width: 690rpx;
  border-radius: 10rpx;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx;
  text-align: center;
}

.content-label {
  font-size: 24rpx;
  color: #6a6a6a;
  display: flex;
  align-items: center;
}

.uni-list {
  margin-top: 30rpx;
  padding: 0 10rpx;
}
</style>